<!--
 *  Copyright (c) 2015 The WebRTC project authors. All Rights Reserved.
 *
 *  Use of this source code is governed by a BSD-style license
 *  that can be found in the LICENSE file in the root of the source
 *  tree.
-->
<link rel="import" href="../../components/polymer/polymer.html">
<link rel="import" href="../../components/iron-icon/iron-icon.html">
<link rel="import" href="../../components/iron-icons/av-icons.html">
<link rel="import" href="../../components/paper-dialog/paper-dialog.html">
<link rel="import" href="../../components/paper-button/paper-button.html">
<link rel="import" href="gum-handler.html">

<!--
`<gum-dialog>` is used to display a dialog asking the user to give user media permissions.

It exposes a 'pending' attribute that changes to true when permissions are given or the dialog was by-passed
to allow a template to easily control other page elements. E.g.:

  <template is="auto-binding">
    <gum-dialog heading="Permissions" pending={{gumPending}}></gum-dialog>
    <template if="{{!gumPending}}">Hurray!!!</template>
  </template>

Note that this element has some logic/strings specific to testrc that should probably be cleanned out.
For now it serves as an example on how to build a UI flow on top of gum-handler.

TODO(andresp): Delay showing the dialog (probably using transitions).
-->
<dom-module id="gum-dialog">
  <style>
    iron-icon[icon="av:videocam-off"] {
      color: #888;
    }
  </style>
  <template>
    <!-- Declare gum-handler to continuously request getUserMedia until permission is given. -->
    <gum-handler pending="{{pending}}" error="{{error}}"></gum-handler>

    <!-- TODO(andresp): pressing esc allows to close the dialog. :( -->
    <paper-dialog id="dialog" opened="{{pending}}" modal>
      <h2>{{heading}}</h2>

      <div hidden$="[[error]]">
        <p>To test your webcam, microphone and speakers we need permission to use
          them, approve by selecting “Allow”.</p>
      </div>

      <div hidden$="[[!error]]">
        <p>Failed to access your computer's camera and microphone (<span>{{error}}</span>).</p>

        <p hidden$="[[!_isNotSupported(error)]]">GetUserMedia is not supported in your browser, please use a WebRTC enabled browser listed at <a href="http://www.webrtc.org">http://www.webrtc.org</a>.</p>
        <p hidden$="[[!_isPermissionDenied(error)]]">Click the <iron-icon icon="av:videocam-off"></iron-icon> icon in the URL bar above to give access to your device's camera and microphone.</p>
        <p hidden$="[[!_isDevicesNotFound(error)]]">No devices found, please connect a camera and/or a microphone to continue, alternatively continue without media devices.</p>
      </div>

      <div hidden$="[[!error]]" class="buttons" horizontal justified layout>
        <paper-button on-tap="_createBugReport">File a bug</paper-button>
        <paper-button dialog-dismiss>Continue without audio/or video</paper-button>
      </div>
    </paper-dialog>
  </template>
  <script>
    Polymer({
      is: 'gum-dialog',
      ready: function() {
        // Hack: for some reason the dialog position and size are wrong when they are calculated directly.
        setTimeout(this.$.dialog.refit.bind(this.$.dialog), 0);
      },
      _createBugReport: function() {
        this.fire('bug-report');
      },
      _isNotSupported: function(error) {
        return error === 'NotSupported';
      },
      _isPermissionDenied: function(error) {
        return error === 'PermissionDeniedError';
      },
      _isDevicesNotFound: function(error) {
        return error === 'DevicesNotFoundError';
      },
      properties: {
        pending: {
          type: Boolean,
          notify: true
        },
        heading: {
          type: String
        }
      }
    });
  </script>
</dom-module>
